<template>
  <div class="touchSwiperArea" ref='area_ref'>
    <touch-swiper :banner="banner" @indicatorStyle="indicator_AreaStyle" ref="swiper_ref">
      <touch-swiper-item v-for="(item, index) in banner" :key="index">
        <div :index="index" class="nav">
          <a href="javascript:void(0)" v-for='a in item.aArray' :style="{'background-color':a[2]}" :class="{'lastA':a[3]?true:false}"><i :class="'iconfont '+a[0]"></i><span>{{a[1]}}</span></a>
        </div>
      </touch-swiper-item>
    </touch-swiper>
    <div class="indicator">
      <ul>
        <li v-for="(item, index) in banner" :key="index" :index="index" ref="li_refs"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import TouchSwiper from "components/common/swiper/touchSwiper/TouchSwiper.vue";
import TouchSwiperItem from "components/common/swiper/touchSwiper/TouchSwiperItem.vue";
export default {
  name: "",
  props: {
    banner: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  components: {
    TouchSwiper,
    TouchSwiperItem,
  },
  mounted () {
      this.initialIndicatorStyle()
      this.navHeight()
  },
  methods: {
    indicator_AreaStyle(index) {
      index==0?this.$refs.area_ref.style.height='205px':this.$refs.area_ref.style.height='325px'
      this.$refs.li_refs.forEach((item) =>
        item.classList.remove("currentIndicator")
      );
      this.$refs.li_refs[index].classList.add("currentIndicator");
    },
    initialIndicatorStyle(){
        this.$refs.li_refs[0].classList.add('currentIndicator')
    },
    navHeight(){
        this.$refs.swiper_ref.el.children[0].children[0].children[0].style.height='180px'
    }
  },
};
</script>

<style scoped lang='less'>
.touchSwiperArea {
  width: 100%;
  transition: all .5s;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
  .indicator {
    width: 100%;
    height: 25px;
    ul {
      display: flex;
      margin: 0;
      padding: 0;
      height: 100%;
      justify-content: center;
      align-items: center;
      li {
        margin: 0 5px;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background-color: #0086f6;
        list-style: none;
      }
    }
  }
}
.currentIndicator {
  width: 14px !important;
  transition: all 0.5s;
}
.lastA{
    flex:0 1 20%!important;
}
</style>
